<template>
  <div class="wrapper">
    <!-- header部分 -->
    <header>
      <p>新增收货地址</p>
    </header>

    <!-- 表单部分 -->
    <div class="form-box">
      <!-- 地址部分 -->
      <div class="form-item">
        <div class="label">地址</div>
        <div class="input-box">
          <div class="select-address" @click="selectAddress">
            选择收货地址
            <i class="fa fa-angle-right"></i>
          </div>
        </div>
      </div>

      <!-- 门牌号 -->
      <div class="form-item">
        <div class="label">门牌号</div>
        <div class="input-box">
          <input type="text" v-model="deliveryAddress.address" placeholder="填写详细地址，例：1号楼102">
        </div>
      </div>

      <!-- 联系人 -->
      <div class="form-item">
        <div class="label">收货人</div>
        <div class="input-box">
          <input type="text" v-model="deliveryAddress.contactName" placeholder="填写收货人姓名">
          <div class="gender-select">
            <label class="gender-option">
              <input type="radio" v-model="deliveryAddress.contactSex" value="1">
              <span>先生</span>
            </label>
            <label class="gender-option">
              <input type="radio" v-model="deliveryAddress.contactSex" value="0">
              <span>女士</span>
            </label>
          </div>
        </div>
      </div>

      <!-- 手机号 -->
      <div class="form-item">
        <div class="label">手机号</div>
        <div class="input-box">
          <input type="tel" v-model="deliveryAddress.contactTel" placeholder="填写正确的收货人号码">
        </div>
      </div>

      <!-- 标签 -->
      <div class="form-item">
        <div class="label">标签</div>
        <div class="tag-group">
          <label class="tag-item">
            <input type="radio" name="tag" value="home">
            <span>家</span>
          </label>
          <label class="tag-item">
            <input type="radio" name="tag" value="company">
            <span>公司</span>
          </label>
          <label class="tag-item">
            <input type="radio" name="tag" value="school">
            <span>学校</span>
          </label>
        </div>
      </div>
    </div>

    <!-- 保存按钮 -->
    <div class="save-btn">
      <button @click="addUserAddress">保存</button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import request from '@/utils/request'
import { ElMessage } from 'element-plus'
import Footer from './Footer.vue'

const router = useRouter()
const route = useRoute()

const businessId = ref(route.query.businessId)
const deliveryAddress = ref({
  contactName: '',
  contactSex: 1,
  contactTel: '',
  address: ''
})

// 添加地址
const addUserAddress = async () => {
  try {
    const token = sessionStorage.getItem('token')
    const user = JSON.parse(sessionStorage.getItem('user'))
    if (!token || !user) {
      ElMessage.warning('请先登录')
      router.push('/login')
      return
    }

    // 表单验证
    if (!deliveryAddress.value.contactName) {
      ElMessage.warning('请输入联系人姓名')
      return
    }
    if (!deliveryAddress.value.contactTel) {
      ElMessage.warning('请输入联系电话')
      return
    }
    if (!deliveryAddress.value.address) {
      ElMessage.warning('请输入详细地址')
      return
    }

    const response = await request({
      url: '/DeliveryAddressController/saveDeliveryAddress',
      method: 'post',
      headers: {
        'Authorization': token,
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      data: {
        ...deliveryAddress.value,
        userId: user.userId
      }
    })

    if (response.data === 1) {
      ElMessage.success('添加成功')
      router.back()
    } else {
      ElMessage.error('添加失败')
    }
  } catch (error) {
    console.error('添加地址错误:', error)
    if (error.response?.status === 403) {
      ElMessage.error('登录已过期，请重新登录')
      sessionStorage.removeItem('token')
      sessionStorage.removeItem('user')
      router.push('/login')
    } else {
      ElMessage.error('添加地址失败')
    }
  }
}

onMounted(() => {
  const token = sessionStorage.getItem('token')
  if (!token) {
    ElMessage.warning('请先登录')
    router.push('/login')
    return
  }

  const user = JSON.parse(sessionStorage.getItem('user'))
  if (!user) {
    ElMessage.warning('用户信息已失效，请重新登录')
    router.push('/login')
    return
  }
})
</script>

<style scoped>
.wrapper {
  width: 100%;
  min-height: 100vh;
  background: #f5f5f5;
}

header {
  width: 100%;
  height: 44px;
  background: #fff;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  color: #333;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.form-box {
  margin-top: 44px;
  background: #fff;
  padding: 0 15px;
}

.form-item {
  padding: 15px 0;
  border-bottom: 1px solid #f5f5f5;
}

.label {
  color: #333;
  font-size: 14px;
  margin-bottom: 8px;
}

.input-box {
  position: relative;
}

.input-box input {
  width: 100%;
  height: 36px;
  border: none;
  outline: none;
  font-size: 14px;
  color: #333;
  padding: 0;
}

.input-box input::placeholder {
  color: #999;
}

.select-address {
  color: #0097FF;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.gender-select {
  margin-top: 10px;
  display: flex;
  gap: 20px;
}

.gender-option {
  display: flex;
  align-items: center;
  gap: 4px;
}

.gender-option input[type="radio"] {
  width: 16px;
  height: 16px;
}

.gender-option span {
  font-size: 14px;
  color: #666;
}

.tag-group {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.tag-item {
  position: relative;
}

.tag-item input[type="radio"] {
  position: absolute;
  opacity: 0;
}

.tag-item span {
  display: inline-block;
  padding: 6px 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 13px;
  color: #666;
}

.tag-item input[type="radio"]:checked + span {
  background: #E7F5FF;
  border-color: #0097FF;
  color: #0097FF;
}

.save-btn {
  padding: 20px 15px;
}

.save-btn button {
  width: 100%;
  height: 44px;
  background: #0097FF;
  border: none;
  border-radius: 22px;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
}
</style>